<template>
  <div class="voteList">
    <el-card
      class="vote-card"
      v-for="(item, index) in voteList"
      :key="index"
      shadow="hover"
    >
      <div slot="header" class="clearfix">
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.title"
          placement="bottom"
        >
          <span class="title">{{ item.title }}</span>
        </el-tooltip>
        <el-button
          class="btn"
          type="primary"
          size="mini"
          @click="handleOpenPage(item)"
          >投票</el-button
        >
        <el-button
          class="btn"
          type="primary"
          size="mini"
          @click="handleGetTop(item)"
          >排名</el-button
        >
      </div>
      <el-tooltip
        class="item"
        effect="dark"
        placement="bottom-start"
        popper-class="voteContentPop"
      >
        <div slot="content" class="voteContent" v-html="`${item.desc}`"></div>
        <div class="text item" v-html="`简介：${item.desc}`"></div>
      </el-tooltip>
      <div class="text item">
        <span>投票时间：{{ toYMD(item.startTime) }}</span>
        <span>结束时间：{{ toYMD(item.endTime) }}</span>
      </div>
      <div class="text item" v-if="item.children && item.show">
        <div style="margin-top: 20px">
          <!-- <div style="display: flex; align-items: center;">
            <selectClassBtn
              :courseData="courseInfo"
              :defaultSelct="$route.query.filter"
              :collapseTags="true"
              @handleChange="handleChange"
            />
            <el-input style="max-width: 300px; margin-left: 20px;" v-model="search" placeholder="搜索姓名/学号"></el-input>
          </div> -->
          <echartsBarCross :finshCount="finshCount(item.children)" :stuList="stuList(item.children)" />
        </div>
      </div>
    </el-card>
    <span v-if="!voteList.length">课程暂无投票</span>
  </div>
</template>

<script>
import { location_QuestionBank, renderTimeToYMD, currTime } from "@/util/tool";
import { getVoteList, getVoteItemList } from "@/request/vote";
import { mapState } from 'vuex';
const echartsBarCross = () => import("@/components/echarts/echartsBarCross");
// const selectClassBtn = () =>
//   import("@/components/selectClass/component/selectClassBtn");
export default {
  components: {
    echartsBarCross,
    // selectClassBtn,
  },
  data() {
    return {
      voteList: [],
    };
  },
  props: {
    currNo: Number,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo
    }),
    toYMD() {
      return (data) => {
        return `${renderTimeToYMD(data)} ${currTime(data)}`;
      };
    },
    finshCount() {
      return function (data = []) {
        const Data = {
          praise: data.map((item) => { 
            return {
              //第一个y轴位置在左侧
              value: item?.finalMark || 0,
              name: item?.realName || "未知",
              link: item?.itemDetailLink
            }}),
          unPrais: data.map((item) => { return {
              //第一个y轴位置在左侧
              value: 0,
              name: item.realName || "未知",
              link: item.itemDetailLink
            }}),
        };
        return Data;
      };
    },
    stuList() {
      return function (data = []) {
        return data.map((item) => item.realName || "未知");
      }
    },
  },
  created() {
    getVoteList({ currNo: this.currNo }).then((res) => {
      if (res.errno === 0) {
        this.voteList = res.data;
      } else {
        this.$antdMessage.error({
          content: res.message || "获取投票列表失败!",
        });
      }
    });
  },
  methods: {
    // 打开投票页面
    handleOpenPage(item) {
      window.open(
        `${location_QuestionBank(window)}/votepublic?voteID=${item.voteID}`
      );
    },
    handleGetTop(item) {
      if (!this.userInfo.accessToken) return this.$router.push({name: "Login"});
      if (item.show) return this.$set(item, "show", false)
      if (item.children) return this.$set(item, "show", true)
      const params = {
        voteID: item.voteID,
        top: 10,
      };
      getVoteItemList(params).then((data) => {
        if (data) {
          data = data.sort((a, b) => {
            return Number(b['finalMark'] || 0) - Number(a['finalMark'] || 0);
          });
          this.$set(item, "children", data)
          this.$set(item, "show", true)
        } else {
          this.$antdMessage.error({
            content: "获取投票排名失败!",
          });
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.voteList {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;

  .clearfix {
    display: flex;
    align-items: center;

    .title {
      max-width: 85%;
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn {
      margin-left: 8px;
    }
  }

  .vote-card {
    margin-right: 15px;
    margin-bottom: 10px;
    flex: 1;
    min-width: 280px;

    .el-card__body {
      div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
<style lang="stylus">
.voteContentPop {
  .voteContent {
    background: transparent !important;
    color: #fff !important;

    span {
      background: transparent !important;
      color: #fff !important;
    }
  }
}
</style>